<template>
  <div class="time-body">
    <el-timeline>
      <el-timeline-item
        :reverse="reverse"
        v-for="(activity, index) in activities"
        :key="index"
        :timestamp="activity.createdTime"
      >
        {{ activity.blogTitle }}
      </el-timeline-item>
    </el-timeline>
    <el-button type="text" @click="getTimeLines" style="color:#bbbbbbf7;margin-left: 72px;">点击加载更多</el-button>
  </div>
</template>

<script>
import { getTimeLine } from '@/api/blog'
export default {
  data() {
    return {
      reverse: true,
      activities: [],
      // 偏移量
      index: 0
    };
  },
  created() {
    this.getTimeLines()
  },
  methods: {
      getTimeLines() {
        getTimeLine(this.index).then(res => {
            this.activities.push(...res.data)
            this.index = this.activities.length
        })
      }
  }
};
</script>

<style src="./time-line.css" scoped>
</style>